<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>梭哈游戏</title>
    <!--引入css 需要用这个标签-->
    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css">
    <script src="js/web3.js"></script>
    <!--核心js 文件.-->
    <script src="jquery/jquery.js"></script>
    <script src="bootstrap/dist/js/bootstrap.js"></script>
    <style>
            *{
                 margin: 0;
                 padding: 0;
                 list-style: none;
            }
            .layout{
                   width: 80%;
                   margin: 40px auto;
            }
            .area_showhand{
                  border: 1px solid #ccc;
                  width: 90%;
                  margin: 20px auto;
                  height: 200px;
                  border-radius: 5px;
            }
			.first_address , .second_address{
				 width: 90%;
				 padding-left: 50px;
			}
            .area_showhand ul{

            }
            .area_showhand ul li{
                  width: 20%;
                  float: left;
            }
            .area_showhand ul li a{
                  display: block;
                  width: 60%;
                  margin: 10px auto;
            }
            .area_showhand ul li a img{
                  width: 100%;
				  border: 1px solid #ccc;
				  height:180px;
            }
            .weiclass{
                  width: 100px;
                  display: inline-block;
            }
    </style>
    <script>
		 //add web3 call here!
         //页面自动加载

         $(function(){
            //1. 构造web3对象
            var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
            web3.eth.getAccounts(function(error,result){
                console.log(result);
            });
            //解锁方法
            function unlockUsers(addrStr){
              web3.eth.personal.unlockAccount(addrStr,"liuyue",600).then(console.log(addrStr+'Account unlocked'));
            }

            //2.构造合约实例
            var abi = [
	{
		"constant": true,
		"inputs": [],
		"name": "randomSeed",
		"outputs": [
			{
				"name": "",
				"type": "bytes32"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": false,
		"inputs": [],
		"name": "withDraw",
		"outputs": [],
		"payable": true,
		"stateMutability": "payable",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [
			{
				"name": "",
				"type": "address"
			}
		],
		"name": "roundBalance",
		"outputs": [
			{
				"name": "",
				"type": "uint256"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "bingInBet",
		"outputs": [
			{
				"name": "",
				"type": "uint256"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [
			{
				"name": "",
				"type": "address"
			}
		],
		"name": "totalBalance",
		"outputs": [
			{
				"name": "",
				"type": "uint256"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "hostPlayer",
		"outputs": [
			{
				"name": "",
				"type": "address"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "getPocketCards",
		"outputs": [
			{
				"name": "",
				"type": "uint8"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": false,
		"inputs": [],
		"name": "bingInFunc",
		"outputs": [],
		"payable": true,
		"stateMutability": "payable",
		"type": "function"
	},
	{
		"constant": false,
		"inputs": [],
		"name": "passCards",
		"outputs": [],
		"payable": false,
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "gameRound",
		"outputs": [
			{
				"name": "",
				"type": "uint8"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [
			{
				"name": "",
				"type": "address"
			}
		],
		"name": "isPlayerBetInThisRound",
		"outputs": [
			{
				"name": "",
				"type": "bool"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": false,
		"inputs": [],
		"name": "join",
		"outputs": [],
		"payable": false,
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"constant": false,
		"inputs": [],
		"name": "foldCards",
		"outputs": [],
		"payable": false,
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"constant": false,
		"inputs": [],
		"name": "resetRoundData",
		"outputs": [],
		"payable": false,
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"constant": false,
		"inputs": [],
		"name": "betFunc",
		"outputs": [],
		"payable": true,
		"stateMutability": "payable",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "mininalBet",
		"outputs": [
			{
				"name": "",
				"type": "uint256"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [
			{
				"name": "pos",
				"type": "uint8"
			}
		],
		"name": "getPlayerCard",
		"outputs": [
			{
				"name": "host",
				"type": "uint8"
			},
			{
				"name": "guest",
				"type": "uint8"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "winner",
		"outputs": [
			{
				"name": "",
				"type": "address"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "guestPlayer",
		"outputs": [
			{
				"name": "",
				"type": "address"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "activeTalkPlayer",
		"outputs": [
			{
				"name": "",
				"type": "address"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [],
		"name": "isGameFinished",
		"outputs": [
			{
				"name": "",
				"type": "bool"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [
			{
				"name": "_addr",
				"type": "address"
			}
		],
		"name": "getRoundBalance",
		"outputs": [
			{
				"name": "",
				"type": "uint256"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"inputs": [
			{
				"name": "_cto",
				"type": "address"
			}
		],
		"payable": false,
		"stateMutability": "nonpayable",
		"type": "constructor"
	},
	{
		"anonymous": false,
		"inputs": [
			{
				"indexed": false,
				"name": "_player",
				"type": "address"
			},
			{
				"indexed": false,
				"name": "card",
				"type": "uint8"
			}
		],
		"name": "onCardDistribute",
		"type": "event"
	},
	{
		"anonymous": false,
		"inputs": [],
		"name": "onGameCreated",
		"type": "event"
	},
	{
		"anonymous": false,
		"inputs": [
			{
				"indexed": false,
				"name": "_playerAddress",
				"type": "address"
			}
		],
		"name": "onPlayerJoined",
		"type": "event"
	},
	{
		"anonymous": false,
		"inputs": [
			{
				"indexed": false,
				"name": "_addr",
				"type": "address"
			},
			{
				"indexed": false,
				"name": "_value",
				"type": "uint256"
			}
		],
		"name": "onBetFunc",
		"type": "event"
	}
];//remix ide enviroment
            var contractAddress = "0x7357c965b7cd39e4c57d792720ab53b201822b47";//remix ide
            var showhand = new web3.eth.Contract(abi,contractAddress);
            console.log(showhand);

            //加入游戏
        		//1.弹出框显示地址栏
            $('#myModal').modal();
            var accountAddr = "";
            $("#joinGameBtn").on("click",function(){
                accountAddr = $("#addressId").val();
                unlockUsers(accountAddr);
                console.log(accountAddr);
                showhand.methods.join().send({
                    from:accountAddr,
                    gas:300000
                },function(error,result){
                  if(error){
                    alert("加入失败！");
                    console.log(error);
                    return;
                  }
                  alert("加入成功！");
                  $("#closeWinBtn").click();
                })
            });

            //下抵住 调用BringInFunc方法
            $(".BringIn").on("click",function(){
                unlockUsers(accountAddr);
                showhand.methods.bingInFunc().send({
                  from:accountAddr,
                  gas:300000,
                  value:$(".getWei").val()
                },function(error,result){
                  if (!error) {
                    alert("下抵住成功");
                  }
                });
            });

            //下注 调用betFunc方法
            $(".Bet").on("click",function(){
              unlockUsers(accountAddr);
              showhand.methods.betFunc().send({
                  from:accountAddr,
                  gas:3000000,
                  value:$(".getWei").val()
              },function(error,result){
                if(!error){
                  alert("下注成功！");
                  return;
                }
              })
            })

            //显示名牌
            function showMingPai(num){
              showhand.methods.getPlayerCard(num - 1).call(function(error,result){
                var host = result.host;
                var guest = result.guest;
                var expre = ".first ul li:nth-child("+num+") img";
                $(expre).attr("src","images/"+guest+".png");
                $(expre).attr("title",guest);

                var expre = ".second ul li:nth-child("+num+") img";
                $(expre).attr("src","images/"+guest+".png");
                $(expre).attr("title",guest);
              })
            }

            //根据点击位置调用显示名牌的方法
            $(".second ul li").on("click",function(){
              var num = $(this).index();
              console.log(num);
              if(num > 0){
                showMingPai(num + 1);
              }else if(num == 0){
                showDiPai();
              }
            })

            //获取底牌 只有玩家自己可见(包括host&guest)
            var hostAddr;
            function getHostPlayer() {
              showhand.methods.hostPlayer().call(function(error,result){
                if(!error){
                    hostAddr = result;

                }
              })
            }

            function showDiPai(){
              getHostPlayer();
              showhand.methods.getPocketCards().call({
                from:accountAddr
              },function(error,result){
                var card = result;
                // 注意hostAddr 与 acctAddr 大小写可能有切换
                hostAddr = hostAddr.toLowerCase();//转小写
                accountAddr = accountAddr.toLowerCase();
                if( hostAddr == accountAddr ) {
                    //代表是host玩家
                    var expre = ".second ul li:nth-child("+1+") img";
                    $(expre).attr("src","images/"+card+".png");
                    $(expre).attr("title",card);
                }
                else {
                    var expre = ".first ul li:nth-child("+1+") img";
                    $(expre).attr("src","images/"+card+".png");
                    $(expre).attr("title",card);
                }
              });
            }

            //弃牌
            $(".foldCard").on("click",function(){
              unlockUsers(accountAddr);
              showhand.methods.foldCards().send({
                from:accountAddr,
                gas:300000
              },function(error,result){
                if(!error){
                  alert("弃牌成功");
                }
              });
            })

            //过牌
            $(".passCard").on("click",function(){
              unlockUsers(accountAddr);
              showhand.methods.passCards().send({
                from:accountAddr,
                gas:300000
              },function(error,result){
                if(!error){
                  alert("已经过牌！");
                }
              })
            })



            //显示当前说话玩家
            $(".ActivePlayer").on("click",function(){
              showhand.methods.activeTalkPlayer().call(function(error,result){
                if(!error){
                  $("#showInfo").text(result);
                }
              })
            })

            //显示当前roundBalance
            $(".getRoundBalace").on("click",function(){
              showhand.methods.getRoundBalance(accountAddr).call(function(error,result){
                if(!error){
                  $("#showInfo").text(result);
                }
              })
            })

         });



	</script>
</head>
<body>
<!--弹出窗口部分-->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">是否加入游戏</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="addressId">账户地址</label>
                    <input type="email" class="form-control" id="addressId" placeholder="请输入账户地址">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id = "closeWinBtn" class="close_win btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" id = "joinGameBtn" class="joinGame btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>

<div class="layout">
        <div class="first_address">
			<span>guestPlayer:</span>
			<span></span>
		</div>
        <div class="first area_showhand">
            <ul>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
            </ul>
        </div>

        <div class="second_address">
			<span>hostPlayer:</span>
			<span></span>
		</div>
        <div class="second area_showhand">
            <ul>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
            </ul>
		</div>
    <div style="text-align: center;">
    wei:<input type="text" class="getWei form-control weiclass" >
    <button type="button" class="BringIn btn btn-danger">下底注</button>
	<button type="button" class="Bet btn btn-primary">下注</button>
	<button type="button" class="ActivePlayer btn btn-primary">该谁说话</button>
	<button type="button" class="getWinner btn btn-primary">查看赢家</button>
  <button type="button" class="foldCard btn btn-primary">弃牌</button>
  <button type="button" class="passCard btn btn-primary">过牌</button>
  <button type="button" class="getRoundBalace btn btn-primary">显示RoundBalance</button>
   </div>

   <div id="showInfo" style="text-align: center;"></div>

</div>

</body>
</html>
